<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: none;
            width: 600px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 0;
            padding:0 ;

        }

        li{
            border-bottom: 1px dashed #cdcdcd;
            padding: 4px;
            opacity: 0;
            filter: alpha(opacity:0);
        }
    </style>
</head>
<body>
       <ul>
           <li>hhhhh</li>
       </ul>
   <textarea name="" id="txt1" cols="30" rows="10"></textarea>
   <button id="btn">发布</button>
       <script src="js/util.js"></script>
   <script type="text/javascript"></script>
   <script>
       var oBtn = document.getElementById('btn');
       var oUl = document.getElementsByTagName('ul')[0];
       var aLi = document.getElementsByTagName('li');
       var txt1 = document.getElementById('txt1');

       oBtn.onclick = function () {

           var content = txt1.value;
           txt1.value = '';

           var oLi = document.createElement('li');
           oLi.innerHTML = content;

           if(oUl.children.length>0){
               oUl.insertBefore(oLi,oUl.children[0]);
           }
           else {
               oUl.appendChild(oLi);
           }


           var iHeight = oLi.offsetHeight;
           startMove(oLi,{height:iHeight},function () {
               startMove(oLi,{opacity:100});
           });

       };


   </script>
</body>
</html>